<template>
    <div class="content">
        <ul>
            <li v-for="(item,index) in arr" :key="index">
                {{ item }}
            </li>
        </ul>
        <button @click="retbtn">数组翻转</button>
        <button @click="slicebtn">数组截取</button>
        <button @click="updtebtn">数组更新</button>
        <button @click="filterbtn">数组过滤</button>

        <p>学员信息</p>
        <li v-for="(item,index) in stu">
            {{ item}} -- {{ index }}
        </li>
        <p>学员详情信息</p>
        <ul v-for="item in stuDetail" :key="item.id">
            <li>编号：{{ item.id }}</li>
            <li>姓名：{{ item.name }}</li>
            <li>年龄：{{ item.age }}</li>
            <li>性别：{{ item.sex }}</li>
            <li>爱好：{{ item.hobby }}</li>
        </ul>
        <p>老师信息</p>
        <ul v-for="(item,index) in className">
            <li>{{ index }}:{{ item }}</li>
        </ul>

    </div>

</template>

<script setup>

import { reactive, ref } from 'vue';

/**
 * 回顾：指令： v-bind v-on v-html v-text v-model  v-if v-show
 *  v-for 指令
 *  语法：v-for=(item,index) in list
 *  分解： item 是别名 index 是索引值 in 是查找 list 是原数组
 *  两种方式：
 *   1、 v-for=" item in list"
 *   2、 v-for="(item,index) in list"
 *   3、 v-for="(item,index) in list" :key="item.id"
 */



const stu = ref(["萧炎", "萧薰儿", "美杜莎", "云韵"])
// 数组对象
const stuDetail = ref([
    { id: 1, name: "萧炎", age: 20, sex: "男", hobby: "炼丹" },
    { id: 2, name: "萧薰儿", age: 18, sex: "女", hobby: "萧炎" },
    { id: 3, name: "美杜莎", age: 19, sex: "女", hobby: "萧炎" },
    { id: 4, name: "云韵", age: 21, sex: "女", hobby: "萧炎" }

])
const className = reactive(
    {
        name: '药尘',
        age: 220,
        hobby: "抽萧炎",
        class: "炼药师"
    }
)

const arr = ref([1, 2, 3, 4])
//数组翻转 可以直接针对v-for 原地更新
const retbtn = () => { 
    // console.log(arr.value.reverse());
    arr.value.reverse()
}
// 数组截取
const slicebtn = () => { 
    // console.log(arr.value.slice(0, 3));
    //原地更新 页面直接更新 否则需要重新赋值
    // 数组截取不会触发 原地更新 需要重新赋值
   arr.value= arr.value.slice(0, 3)
}

//数组更新
const updtebtn = () => { 
    arr.value[1] = 50 // 单个可以更新
    //concat  数组拼接、 不会针对数组原地更新
    const arr2=arr.value.concat([6, 7, 8])
    console.log(arr2);
    arr.value = arr2; // 需要重新赋值 触发更新
}

const filterbtn = () => { 
    // filter 过滤数组 当后台的数据返回时 需要从当前json中其中一个的时候
    // (item : 别名 也是数组的数据) => item >2 是条件 item数据的条件
   const arr3= arr.value.filter(item => item >=2)
  const arr2=  arr.value.filter(item => {
      return item > 2
  })
  // json name = ok
//   let arr4= arr.value.map((item) => { 
//         return item > 2
//     })
    console.log(arr2);
    console.log(arr3);
    
    
}
</script>

<style scoped>
.content{
    background-color: antiquewhite;
    font-size: 20px;
    /* color: red; */
    height: 100%;

}
</style>